<!--
 * @Author: 王鹏 2911783749@qq.com
 * @Date: 2022-11-08 10:34:23
 * @LastEditors: 王鹏 2911783749@qq.com
 * @LastEditTime: 2022-11-08 16:47:58
 * @FilePath: \vue3Mixiu\code\src\components\LeftMenu.vue
 * @Description: 左侧菜单组件
-->
<template>
    <el-menu
      active-text-color="#ffd04b"
      background-color="#545c64"
      class="el-menu-vertical-demo"
      default-active="1"
      text-color="#fff"
      unique-opened
      style="height:100%;"
    >
      <router-link to="/">
        <el-menu-item index="1">
          <el-icon>
            <Expand />
          </el-icon>
          <span>首页</span>
        </el-menu-item></router-link
      >
      <template v-for="menu in menus" :key="menu.path">
        <el-sub-menu v-if="menu.children" :index="menu.path">
          <template #title>
            <el-icon>
              <component :is="menu.icon"></component>
            </el-icon>
            <span>{{ menu.name }}</span>
          </template>
          <el-menu-item-group>
            <router-link
              v-for="(item, index) in menu.children"
              :key="index"
              :to="item.path"
            >
              <el-menu-item :index="item.path">
                {{ item.name }}
              </el-menu-item>
            </router-link>
          </el-menu-item-group>
        </el-sub-menu>
      </template>
    </el-menu>
</template>
<script lang="ts" setup>
import { ref } from "vue";
const menus = ref([
  {
    icon: "Money",
    name: "资金管理",
    path: "found",
    children: [
      {
        path: "Profiles",
        name: "资金流水",
      },
    ],
  },
  {
    icon: "InfoFilled",
    name: "信息管理",
    path: "info",
    children: [
      {
        path: "userInfo",
        name: "个人信息",
      },
    ],
  },
]);
</script>
<style scoped>
.el-menu {
  border-right: none;
}
a {
  text-decoration: none;
}
</style>